<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Counter</title>
    <meta name="viewport" content="width=device-width">
    <style>
    .container {
        width: 450px;
        margin: 0 auto;
        text-align: center;
    }

    .gauge {
        width: 450px;
        height: 450px;
    }

    a:link.button,
    a:active.button,
    a:visited.button,
    a:hover.button {
        margin: 30px 5px 0 2px;
        padding: 7px 13px;
    }
    </style>
</head>

<body>
    <div class="container">
        <div id="g1" class="gauge"></div>
        <a href="#" id="g1_refresh">Random Refresh</a>
    </div>
    <script src="../raphael-2.1.4.min.js"></script>
    <script src="../justgage.js"></script>
    <script>
    var g1;
    document.addEventListener("DOMContentLoaded", function(event) {
        g1 = new JustGage({
            id: "g1",
            title: "Font Options",
            value: 72,
            min: 0,
            max: 100,
            gaugeWidthScale: 0.6,
            counter: true,
            titleFontColor: "red",
            titleFontFamily: "Georgia",
            titlePosition: "below",
            valueFontColor: "blue",
            valueFontFamily: "Georgia"
        });

        document.getElementById('g1_refresh').addEventListener('click', function() {
            g1.refresh(getRandomInt(0, 100));
        });
    });
    </script>
</body>

</html>
